<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv= "Content-Type" content="text/html; charset=utf-8" />
	<title>Dojo: Demo#3 - Mash it up</title>

	<!-- note: get dojo from http://www.dojotoolkit.org/download/ and install in ../dojo-1.5 -->
	<script type="text/javascript" src="../dojo-1.5/dojo/dojo.js" charset="utf-8">	       
	</script>

	<link rel="stylesheet" type="text/css" href="../dojo-1.5/dojo/resources/dojo.css" />
	<link rel="stylesheet" type="text/css" href="../dojo-1.5/dojox/grid/resources/Grid.css" />
	<link rel="stylesheet" type="text/css" href="../dojo-1.5/dojox/grid/resources/tundraGrid.css" />
	<link rel="stylesheet" type="text/css" href="../dojo-1.5/dijit/themes/tundra/tundra.css" /
		
	<style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; }
			.contact { border-width:2pt; border-style:solid; background:lightgrey; margin:20px; padding:10px; width:400px }
			.contact_data { font-size:120%; }
			.contact_button { float:right; }
    </style> 
	
	<script type="text/javascript">
	
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.SplitContainer");
		dojo.require("dojox.grid.DataGrid");
		dojo.require("dojox.data.CsvStore");
	
		<!-- note: the own widget code is unter demo/contacts - path is relative to dojo base url -->
		dojo.registerModulePath("contacts","../../demo/contacts");
		dojo.require("contacts.ContactCard");		
		
		function onSelect(event) {						
			var selected = contactsGrid.getItem(event.rowIndex);			 
			var ct = new contacts.ContactCard({lname  : csvStore.getValue(selected, "Nachname")||"",
				                               surname: csvStore.getValue(selected, "Vorname")||"", 
											   email  : csvStore.getValue(selected, "E-Mail-Adresse")||"",
											   org    : csvStore.getValue(selected, "Firma") ||"",												 
											});
			// place contact node		
			dojo.place(ct.domNode, dojo.byId("start"), "after");			 
		}
		
		function setQuery(name) {					 			
			contactsGrid.setQuery({ Nachname: name });
		}
		
		dojo.config.isDebug=true;
		dojo.config.parseOnLoad=true;

		console.log("loading... dojo"+dojo.version);
    </script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.SplitContainer"
  orientation="horizontal"
  sizerWidth="5"
  activeSizing="true"
  style="border:1px solid #bfbfbf; float:left; width:1200px; height:460px;">
  <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
    	
	<span dojoType="dojox.data.CsvStore"  jsId="csvStore" url="data/contacts.csv"></span>
	
	<table dojoType="dojox.grid.DataGrid" jsId="contactsGrid" store="csvStore"
            rowsPerPage="20" 
			query="{}" 
			clientSort="true" 
			style="height:400px" 
			rowSelector="20px"
			onRowClick="onSelect" >
	<thead>
		<tr>
			<th field="Vorname" width="120px">Vorname</th>
			<th field="Nachname" width="120px">Name</th>
			<th field="Firma" width="auto">Organisation</th>
		</tr>
	</thead>
	</table>
	<a href="#" onclick="setQuery('A*')">A</a>
	<a href="#" onclick="setQuery('B*')">B</a>
	<a href="#" onclick="setQuery('C*')">C</a>
	&nbsp; ... &nbsp; 
	<a href="#" onclick="setQuery('Z*')">Z</a>
	&nbsp; ... &nbsp; 
	<a href="#" onclick="setQuery('*')">reset</a>
	<hr>
	<a href="index.html">back</a>
  </div>
  <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
    <h2 id="start">Contact Details:</h2>
	
  </div> <!-- ContentPane -->
</div> <!-- SplitContainer -->
</body>
</html>